<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <%@include file="../common/base.jsp"%>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>费用明细</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
    <style>
        body{
            position: relative;
            /*left: 0;*/
            /*right: 0;*/
            /*top: 0;*/
            /*bottom: 0;*/
            /*min-height: 500px;*/
        }
        .l-footer{
            position: absolute;
            /*bottom: -70px;*/
            padding-bottom: 10px;
        }
        .cleanw{
            position: absolute;
            top: -22px;
            background: #eee;
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            border-radius: 16px;
            left: 14px;
        }
        .em-text{
            font-family: PingFang-SC;
            font-size: 14px;
            line-height: 24px;
            text-align: justify;
            color: #9ea7b1;
            /*width: 90%;*/
            margin: 0 auto;
            margin-top: 26px;
        }
        .l-footer{
            position: absolute;
        }
    </style>
</head>
<body>
<div class="cleanw">Χ</div>
<div class="fare-tatol">
    <p>车费详情</p>
    <p class="money"><span id="actPaid"></span>元</p>
    <p style="font-size: 12px;line-height: 16px;text-align: center;" id="orderType"></p>
</div>
<div class="fare-list">
    <ul class="fare-list-ul" id="farelist">
    </ul>
    <p class="em-text" style="display: none;">预估费用仅供参考，实际费用可能会因交通情况、天气等因素而不同。</p>
</div>

<div class="l-footer">
    <a href="javascript:void(0)" class="jijia">计价详情>></a>
</div>
</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js?version=${version}"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script>
    (function(){
        function getQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  decodeURI(r[2]); return "";
        }
        if(getQueryString('typemodule')=="1"){
            $('.jijia').hide();
        }

    })()
    jQuery(document).ready(function($) {
        var $document = $(document);
        var yun=new yueajax( "${openId}");
//        页面初始化
        // todo:计价详情修改传入得参数修改
        function initPage() {
            var yugu=url.getQueryString('estimate');
            if(yugu=="Estimate"){



                var es=getLocalStorage(yugu,'object');
                $('.em-text').show();
                $('title').html('价格预估')
                yun.jijia='${base}/h5/common/rulePrice?carType=2&appid='+yun.appid+'&cityUuid='+es.cityUuid+'&carModelUuid='+window.top. $("#selectCarType").find('span').eq(0).data("id");
                $('#actPaid').html(es.actPaid);
                var transfer = es.typeTrip;
                if(transfer==5){
                    $('#orderType').html('接机')
                }else if(transfer==4){
                    $('#orderType').html('送机')
                }else{
                    $('#orderType').remove();
                }
                writeHtml(es);
                return;
            }
            yun.jijia='${base}/h5/common/rulePrice?appid='+yun.appid+'&orderUuid='+yun.orderUuid;
            yun.ajax_md5({orderUuid:yun.orderUuid},
                '${base}/api/v1/passenger/token/order/fareItems',
                function (data) {
                    var couponFare=url.getQueryString('couponFare');
                    var dd = data.data;
                    if(dd.typeTrip==5){
                        $('#orderType').html('接机')
                    }else if(dd.typeTrip==4){
                        $('#orderType').html('送机')
                    }else{
                        $('#orderType').remove();
                    }
                    if(couponFare!=0 || couponFare!='0'){
                        writeHtml(data.data,couponFare);
                    }else{
                        writeHtml(data.data);
                    }

                },
                function (data) {
                    layer.msg(data.msg)
                })
        }
        initPage();
//        传入数据，进行渲染
        function writeHtml(data,couponFare){
            var html='',c=data.costItems;
            for(var i in c){
                var ci=c[i];
                html+='<li';
//                优惠券判断
                if(ci.deductible){html+=' class="you"'}
                html+='>';
                html+='<span>'+ci.item+'</span>';
                html+='<span>'+ci.cost+'元</span>';
                html+='</li>';
            }
            console.log(couponFare,!!couponFare)
            if(!!couponFare){
                html+='<li class="you">';
                html+='<span>优惠券抵扣</span>';
                html+='<span>'+couponFare+'元</span>';
                html+='</li>';
            }
            $('#farelist').html(html);
            $('#actPaid').html(c.actPaid || data.actualFare);
        }
//        关闭
        $document.on('touchend','.cleanw',function (event) {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        })
//
        $document.on('touchend','.jijia',function (event) {
//            alert('cc')
            var index = window.top; //获取窗口索引
            index.location.href=yun.jijia;

        })
    });
</script>
</html>
